.w-08 {
  width: 80%;
}

//边距
//2
.p-tb-2 {
  padding-top: 4rpx;
  padding-bottom: 4rpx;
}

.p-tb-4 {
  padding-top: 8rpx;
  padding-bottom: 8rpx;
}
.p-lr-2 {
  padding-left: 4rpx;
  padding-right: 4rpx;
}

.p-lr-4 {
  padding-left: 8rpx;
  padding-right: 8rpx;
}

.m-lr-4 {
  margin-left: 8rpx;
  margin-right: 8rpx;
}
//6
.p-tb-6 {
  padding-top: 12rpx;
  padding-bottom: 12rpx;
}

.m-tb-4 {
  margin-top: 8rpx;
  margin-bottom: 8rpx;
}
.m-tb-8 {
  margin-top: 16rpx;
  margin-bottom: 16rpx;
}

.m-lr-8 {
  margin-left: 16rpx;
  margin-right: 16rpx;
}
.p-tb-8 {
  padding-top: 16rpx;
  padding-bottom: 16rpx;
}

.p-lr-8 {
  padding-left: 16rpx;
  padding-right: 16rpx;
}

.m-tb-10 {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.m-lr-10 {
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.p-tb-10 {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.p-lr-10 {
  padding-left: 20rpx;
  padding-right: 20rpx;
}

.m-tb-12 {
  margin-top: 24rpx;
  margin-bottom: 24rpx;
}

.m-lr-12 {
  margin-left: 24rpx;
  margin-right: 24rpx;
}

.p-tb-12 {
  padding-top: 24rpx;
  padding-bottom: 24rpx;
}

.p-lr-12 {
  padding-left: 24rpx;
  padding-right: 24rpx;
}

.m-tb-16 {
  margin-top: 32rpx;
  margin-bottom: 32rpx;
}

.m-lr-16 {
  margin-left: 32rpx;
  margin-right: 32rpx;
}

.p-tb-16 {
  padding-top: 32rpx;
  padding-bottom: 32rpx;
}

.p-lr-16 {
  padding-left: 32rpx;
  padding-right: 32rpx;
}

// 20
.p-tb-20 {
  padding-top: 40rpx;
  padding-bottom: 40rpx;
}
.m-tb-24 {
  margin-top: 48rpx;
  margin-bottom: 48rpx;
}

.m-lr-24 {
  margin-left: 48rpx;
  margin-right: 48rpx;
}

.p-tb-24 {
  padding-top: 48rpx;
  padding-bottom: 48rpx;
}
.p-lr-20 {
  padding-left: 40rpx;
  padding-right: 40rpx;
}

.p-lr-24 {
  padding-left: 48rpx;
  padding-right: 48rpx;
}

//32
.p-lr-32 {
  padding-left: 32px;
  padding-right: 32px;
}
.p-tb-18 {
  padding-top: 36rpx;
  padding-bottom: 36rpx;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-x-center {
  display: flex;
  justify-content: center;
}

.flex-y-center {
  display: flex;
  align-items: center;
}

.flex-y-start {
  display: flex;
  align-items: start;
}

.flex-x-end {
  display: flex;
  justify-content: flex-end;
}

.flex-y-end {
  display: flex;
  align-items: end;
}
//两边对齐
.flex-x-between {
  display: flex;
  justify-content: space-between;
}

//平均分布 //两侧间隔相等
.flex-x-around {
  display: flex;
  justify-content: space-around;
}

//先两边贴边，再分配剩余的空间
.flex-x-between-reverse {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

//换行
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
//x轴
.flex-wrap-flow {
  display: flex;
  flex-flow: row wrap;
}

.flex-direction-column {
  display: flex;
  flex-direction: column;
}
//flex占比
.flex-grow-1 {
  flex-grow: 1;
}
.flex-grow-2 {
  flex-grow: 2;
}
.flex-grow-3 {
  flex-grow: 3;
}
.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}

// 颜色
.cl-333333 {
  color: #333333;
}
.cl-999999 {
  color: #999999;
}
.cl-666666 {
  color: #666666;
}
.cl-white {
  color: #ffffff;
}

.cl-danger {
  color: #bc4741;
}

.cl-warning {
  color: #ffb800;
}

.cl-success {
  color: #27995c;
}

.cl-red {
  color: #e04035;
}

.cl-yellow {
  color: #ffbd3e;
}

.cl-green {
  color: #5bce7b;
}

.cl-blue {
  color: #69a5ff;
}

.cl-grey {
  color: #6b6b6b;
}
.cl-7C4504 {
  color: #7c4504;
}
.cl-ED7423 {
  color: #ed7423;
}
.cl-F79724 {
  color: #f79724;
}

.bg-white {
  background-color: #ffffff;
}

.bg-danger {
  background: #bc4741;
}

.bg-warning {
  background: #ffb800;
}
.bg-F79724 {
  background-color: #f79724;
}
.bg-success {
  background: #27995c;
}
.bg-F4F4F4 {
  background-color: #f4f4f4;
}

.bg-red {
  background: #ff5656;
}

.bg-green {
  background-color: #5bce7b;
}

.bg-blue {
  background-color: #69a5ff;
}

.bg-grey {
  background-color: #6b6b6b;
}

.btn-bg-grey {
  background-color: #f2f6fa;
}

.bg-transparent {
  background-color: transparent;
}

//下边框置灰
.border-b-grey {
  border-bottom: 1px solid #e6e6e6;
}

.border-b-grey-2 {
  border-bottom: 2px solid #e6e6e6;
}

//虚线
.border-b-dashed-grey {
  border-bottom: 1px dashed #e6e6e6;
}

.border-b-dashed-grey-2 {
  border-bottom: 2px dashed #e6e6e6;
}

.border-b-dashed-FFF3D8-2 {
  border-bottom: 1px dashed #f090344d;
}
.fs-8 {
  font-size: 16rpx;
}
//字体
.fs-10 {
  font-size: 20rpx;
}

.fs-12 {
  font-size: 24rpx;
}
.fs-14 {
  font-size: 28rpx;
}

.fs-16 {
  font-size: 32rpx;
}

.fs-18 {
  font-size: 36rpx;
}

.fs-20 {
  font-size: 40rpx;
}

.fs-24 {
  font-size: 48rpx;
}

.fs-32 {
  font-size: 64rpx;
}

.fw-500 {
  font-weight: 500;
}

.fw-700 {
  font-weight: 700;
}

// 文本间距
.letter-spacing-2 {
  letter-spacing: 2px;
}

// 文本高度
.fh-16 {
  height: 16px;
  line-height: 16px;
}

.fh-32 {
  height: 32px;
  line-height: 32px;
}

// 文本居中
.text-center {
  text-align: center;
}
// 文本居右
.text-right {
  text-align: right;
}
// 文本换行
.word-break-all {
  word-break: break-all;
}

// 文本不换行
.space-nowrap {
  white-space: nowrap;
}

// position
.position-fixed {
  position: fixed;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}
// boxing
.border-box {
  box-sizing: border-box;
}

//圆角
.radius-4 {
  border-radius: 8rpx;
}

.radius-8 {
  border-radius: 16rpx;
}
.radius-14 {
  border-radius: 24rpx;
}
.radius-16 {
  border-radius: 32rpx;
}
.radius-18 {
  border-radius: 36rpx;
}

.radius-p50 {
  border-radius: 50%;
}

// overflow
.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

//边框原角
.radius-12 {
  border-radius: 24rpx;
}

//fh
.fh-24 {
  height: 24px;
  line-height: 24px;
}

//超出一行省略
.text-over {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.img-w69-h24 {
  width: 138rpx;
  height: 48rpx;
}
.img-w76-h40 {
  width: 152rpx;
  height: 80rpx;
}
.fh-48 {
  height: 48px;
  line-height: 48px;
}
// 长宽
.image-60 {
  width: 120rpx;
  height: 120rpx;
}
//bg 白色、 padding 16
.page-bw-p16 {
  padding: 16px;
  background-color: #ffffff;
}

//bg 白色、 padding 12
.page-bw-p12 {
  padding: 12px;
  background-color: #ffffff;
}

// p-tb-16、p-lr-12
.page-tb16-lr12 {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 12px;
  padding-right: 12px;
}

// p-tb-12、p-lr-16
.page-tb12-lr16 {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
}

// 对齐方式
//两端

.flex-left-right-between {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.line-12 {
  height: 24rpx;
  background-color: #f5f5f5;
}

// 表单
.page-forms {
  ::v-deep .uni-forms-item {
    margin: 8px 0 0;

    &__label {
      width: 72px !important;
      margin-right: 8px;
      padding: 0;
      color: #6b6b6b;
    }
    &__content {
      display: flex;
      align-items: center;
      height: 40px;
      border-radius: 8px;
      background: #f3f4f6;
      padding: 10px 16px;

      uni-picker {
        width: 100%;
        height: 100%;
      }
    }

    .uni-easyinput {
      &__content {
        background-color: transparent !important;
        border: none;

        &-input {
          padding: 0 !important;
        }
      }
    }
  }

  .item-textarea {
    ::v-deep .uni-forms-item__content {
      padding: 0;
      height: auto;

      .uni-easyinput__content {
        background: #f3f4f6;
      }
    }
  }
}
